<template>
  <div>
    <cus-search class="mb_20">
      <cus-search-item>
        <Form class="flex" ref="formValidate" :model="form" :label-width="120">
          <FormItem class="mr_48 mb_20" label="统计周期" prop="statisticalDate">
            <DatePicker
              type="year"
              placeholder="选择年份"
              v-model="form.statisticalDate"
              :options="options1"
              style="width: 200px"
            />
          </FormItem>
          <!-- <FormItem class="mr_48" label="审核状态:" prop="organAuditState">
              <Select
                v-model="form.organAuditState"
                placeholder="请选择"
                clearable
                style="width: 200px"
              >
                <Option :value="0">待审核</Option>
                <Option :value="1">已审核通过</Option>
                <Option :value="2">已驳回</Option>
              </Select>
            </FormItem> -->
          <FormItem class="mr_48 mb_20" label="提交状态" prop="submitStatus">
            <Select
              v-model="form.submitStatus"
              placeholder="请选择"
              clearable
              style="width: 200px"
            >
              <Option :value="0">未提交</Option>
              <Option :value="1">已提交</Option>
            </Select>
          </FormItem>
          <FormItem class="mr_48 mb_20" label="伙食单位" prop="unitCode">
            <Select
              v-model="form.unitCode"
              placeholder="请选择"
              clearable
              style="width: 200px"
            >
              <Option
                :value="item.unitCode"
                v-for="(item, index) in subCanteenList"
                :key="index"
                >{{ item.unitName }}</Option
              >
            </Select>
          </FormItem>
          <Button class="mr_24 mb_20" type="primary" @click="search()">查询</Button>
          <Button class="mr_24 mb_20" type="default" @click="reset()">重置</Button>
        </Form>
      </cus-search-item>
    </cus-search>
    <div class="content-bottom">
    <cus-card>
      <keyIngredientsTable
        ref="keyIngredientsTable"
        :form="form"
      ></keyIngredientsTable>
    </cus-card>
  </div>
  </div>
</template>
      <script>
import { getSubCanteenList } from "@/api/organ/organization";
import keyIngredientsTable from "./components/keyIngredientsTable.vue";

export default {
  components: { keyIngredientsTable },
  data() {
    return {
      form: {
        // organAuditState: null, // 审核状态
        submitStatus: null, //提交状态
        unitCode: null, // 伙食单位
        statisticalDate: new Date(
          new Date().setHours(0, 0, 0) - new Date().getDay()
        ),
      },
      options1: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now() - 86400000;
        },
      },
      subCanteenList: [], // 下级单位
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0,
      },
    };
  },
  mounted() {
    setTimeout(() => {
      this.tableHeight = window.innerHeight - 240; // 表格自适应高度
    }, 100);
    window.addEventListener("resize", this.tableHeightChange, true);
    this.getSubCanteenListApi();
  },
  methods: {
    search() {
      this.$refs["keyIngredientsTable"].onInit();
    },
    reset() {
      this.$refs["formValidate"].resetFields();
      this.form.statisticalDate = new Date().Format("yyyy");
      this.$refs["keyIngredientsTable"].onInit();
    },
    // 获取所有的伙食单位-----------------------接口
    getSubCanteenListApi() {
      this.loading = true;
      return new Promise((resolve) => {
        getSubCanteenList({
          currentPage: 1,
          pageSize: 1000,
        }).then((res) => {
          this.loading = false;
          if (res.code === 1) {
            this.subCanteenList = res.data.list;
            resolve();
          }
        });
      });
    },
    // 获取本周日期组件处理
    getCurrentWeek(date) {
      let nowData = new Date(date); //传入时间参数,如 2021-11-09 获取给定日期所属的周 日期
      let currentDay = nowData.getDay();
      if (currentDay == 0) {
        currentDay = 7;
      }
      let beforweek = [],
        afterWeek = [];
      for (let i = 1; i <= 7; i++) {
        if (currentDay - i >= 0) {
          let DayTime =
            nowData.getTime() - (currentDay - i) * 24 * 60 * 60 * 1000;
          beforweek.push(new Date(DayTime).Format("yyyy-MM-dd"));
        } else {
          let DayTime = nowData.getTime() + (8 - i) * 24 * 60 * 60 * 1000;
          afterWeek.push(new Date(DayTime).Format("yyyy-MM-dd"));
        }
      }
      afterWeek = afterWeek.reverse();
      let dateList = [...beforweek, ...afterWeek];
      console.log(dateList);
      return dateList;
    },
    tableHeightChange() {
      this.tableHeight = 0;
      setTimeout(() => {
        this.tableHeight = window.innerHeight - 260; // 表格自适应高度
      }, 100);
    },
  },
  destroyed() {
    window.removeEventListener("resize", this.tableHeightChange, true);
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
      